<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册中心--->用户注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctxPath}/static/manage/css/x-admin.css" media="all">
    <script src="${ctxPath}/static/manage/js/jquery-1.8.3.min.js"></script>
    <script src="${ctxPath}/static/manage/layui/layui.js"></script>
    <script src="${ctxPath}/static/manage/js/util.js"></script>
    <script src="${ctxPath}/static/manage/js/x-layui.js" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" id="formUpdate">
    <input type="hidden" id="state" name="state" value="1" required lay-verify="required"
           autocomplete="off" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>用户账号</label>
        <div class="layui-input-inline">
            <input type="text" id="account" name="account" required lay-verify="required" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>用户名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 用户姓名</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>登陆密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" id="password" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 登陆密码</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>验证密码</label>
        <div class="layui-input-inline">
            <input type="password" name="" id="passwordVerified" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 验证密码</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>用户手机</label>
        <div class="layui-input-inline">
            <input type="text" id="phone" name="phone" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">短信验证码</label>
        <div class="layui-input-inline">
            <input type="text" id="verifyCode" placeholder="请输入验证码" class="layui-input">
        </div>

        <button type="button" class="layui-btn layui-inline" name="getMvcode" id="sendSms">点击获取</button>
        <button class="layui-btn layui-btn-sm layui-btn-disabled layui-inline reset-code" id="sendSms1"
                style="display:none; width:20%"><span id="second">60</span>秒后重发
        </button>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>用户邮箱</label>
        <div class="layui-input-inline">
            <input type="text" id="email" name="email" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>出生年月</label>
        <div class="layui-input-inline">
            <input type="text" id="birthday" name="birthdaySelect" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内网IP</label>
        <div class="layui-input-inline">
            <input type="text" id="ip" name="ip" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">兴趣爱好</label>
        <div class="layui-input-inline">
            <input type="text" id="version" name="version" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button class="layui-btn" id="ver" type="button" lay-filter="update" lay-submit>提交</button>
    </div>
</form>
</body>
<script type="text/javascript">


    layui.use(['jquery', 'layer', 'form', 'laydate'], function () {
        var $ = layui.$, form = layui.form, layer = layui.layer, laydate = layui.laydate;
        var code = "0";
        laydate.render({
            elem: '#birthday'
        });

        // 发送短信验证码
        $('#sendSms').on('click', function () {

                var phone = $("input[name='phone']").val();//手机验证码

                if (phone.length != 11) {
                    alert("手机格式错误");
                    return;
                }
                $('[name="getMvcode"]').val('正在发送,请注意查收');
                $.ajax({
                    url: '/sendSms',
                    data: {
                        phone: phone
                    },
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            alert("发送成功,请注意查收");
                            countdownHandler();
                            alert("data:" + data);
                            code = data;
                            alert("code:" + code)
                        }
                    }
                });

                //短信验证码倒计时
                function countdownHandler() {
                    $('#sendSms').hide();
                    $('#second').html('59');
                    $('#sendSms1').show();
                    var second = 59;
                    var timer = null;
                    timer = setInterval(function () {
                        second -= 1;
                        if (second > 0) {
                            $('#second').html(second);
                        } else {
                            clearInterval(timer);
                            $('#sendSms').show();
                            $('#sendSms1').hide();
                        }
                    }, 1000);
                }
            }
        );


        //监听提交
        form.on('submit(update)', function () {
            var phone = $("#phone").val();
            var email = $("#email").val();
            var password = $("#password").val();
            var passwordVerified = $("#passwordVerified").val();
            var verify = $("#verifyCode").val();
            // 校验手机号是否合法，邮箱是否合法
            if (!checkMobile(phone)) {
                alert("手机号码不合法");
                return false;
            }
            // alert("verify:"+verify+"code"+code);
            // 验证验证码是否正确
            if (verify.length <= 0) {
                alert("请输入验证码");
                return false;
            }
            if (verify != code) {
                alert("验证码输入错误");
                return false;
            }

            if (email.length > 30) {
                alert("邮箱地址长度不能超过30个字符");
                return false;
            }
            if (!checkEmail(email)) {
                alert("邮件地址不合法");
                return false;
            }

            //密码判断
            if (password != passwordVerified) {
                alert("两次密码不一致");
                return false;
            }
            $.ajax({
                url: '/registerUser',
                type: 'post',
                data: $("#formUpdate").serialize(),
                success: function (result) {
                    alert(result);
                    if (result == "处理成功") {
                        //发送请求
                        var emailSend = $("input[name=email]").val();
                        $.ajax({
                            url: "/sendEmail",
                            type: "post",
                            data: {
                                emailSend: emailSend
                            },
                            dataType: "json",
                            success: function (data) {
                            }
                        });
                        window.parent.location.reload();
                    }
                },
                error: function (result) {
                    alert("失败？请及时告知开发人员" + result);
                    window.location.reload();
                }

            });
        });

    });


    // 日期格式化
    $(document).ready(function () {
        var birthday = $("#birthday").val();
        if (birthday != '' && birthday != null) {
            $("#birthday").val(new Date(birthday).format("yyyy-MM-dd"));
        }
    });
</script>
</html>
